<template>
  <div class="board-column">
    <div class="board-column-header">
      {{ headerText }}
    </div>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="单选题" v-if="list.singleChoiceQuestions && list.singleChoiceQuestions.length">
        <template slot="title">
          <span style="font-size: 23px; font-weight: 700"
            >单项选择题(共{{ list.singleChoiceQuestions.length }}题, 每题{{list.singleChoiceQuestions[0].proportion}}分, 共{{ list.singleChoiceQuestions.length * list.singleChoiceQuestions[0].proportion }}分)</span
          >
        </template>
        <div
          v-for="(element, questionIndex) in list.singleChoiceQuestions"
          :key="element.id"
          class="board-item"
        >
          <!-- 单选题模板 -->
          <div
            v-if="element.questionType == '单选题'"
            class="item"
            :class="{ active: element.showAdd }"
            v-click-outside="{ handler: hideButtons, element: element }"
            @click="element.showAdd = true"
          >
            <div class="question" style="margin-bottom: 20px">
              <div style="">
                <span style="color: red; font-size: 20px; margin-right: "
                  >*</span
                ><span class="questionNumber">{{ questionIndex + 1 }}.</span>
                <span
                  class="questionContent"
                  v-show="!element.editing"
                  @click="clickQuestion(element, questionIndex)"
                  >{{ element.question }}</span
                >
                <el-input
                  style="width: 300px"
                  ref="questionInput"
                  type="textarea"
                  :autosize="true"
                  v-model="element.question"
                  @blur="element.editing = false"
                  v-show="element.editing"
                />
              </div>
              <div>
                <span
                  class="score"
                  v-show="!element.editScore"
                  @click="changeScore(element, questionIndex)"
                  >{{ element.proportion }}</span
                >
                <el-input
                  style="width: 100px"
                  ref="singleScoreInput"
                  v-model="element.proportion"
                  @blur="element.editScore=false"
                  v-show="element.editScore"
                />
                <span style="font-size: 16px">分</span>
              </div>
            </div>
            <div>
              <draggable
                :list="element.optionsList"
                class="board-column-content"
                :set-data="setData"
              >
                <div
                  v-for="(optionElement, optionsIndex) in element.optionsList"
                  :key="optionElement.id"
                  @mouseenter="optionElement.isHovered = false"
                  @mouseleave="optionElement.isHovered = true"
                  class="board-item"
                  style="diplay: flex; justify-content: space-between"
                >
                  <div style="display: flex; align-items: center">
                    {{ optionsItem[optionsIndex] }}.
                    <span
                      @click="
                        clickOptions(element, questionIndex, optionsIndex)
                      "
                      style="width: 400px; margin-left: 20px"
                      v-if="!optionElement.editing"
                      >{{ optionElement.content }} {{ optionElement.id }}</span
                    >
                    <el-input
                      type="textarea"
                      :autosize="true"
                      :ref="'singleOptionsInput_' + questionIndex"
                      v-model="optionElement.content"
                      style="
                        display: inline-block;
                        width: 400px;
                        margin-left: 20px;
                      "
                      class="enterpriseName"
                      @blur="optionElement.editing = false"
                      v-show="optionElement.editing"
                    ></el-input>
                  </div>
                  <el-button
                    @click="deleteOption(element, questionIndex, optionsIndex)"
                    :class="{ 'hovered-item': optionElement.isHovered }"
                    style="margin-left: 100px"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </div>
              </draggable>
            </div>
            <div v-if="element.showAdd" class="addBox">
              <div @click="inputAnswer(element)" class="addOption add">
                <img
                  src="../../../public/publishAssignment/正确答案.svg"
                  alt=""
                  style="margin-right: 3px"
                /><span style="line-height: 25px; color: #2672ff"
                  >正确答案</span
                >
              </div>
              <div
                @click="addOption(element, questionIndex)"
                class="addOption add"
              >
                <img
                  src="../../../public/publishAssignment/添加.svg"
                  alt=""
                /><span style="line-height: 25px; color: #2672ff"
                  >添加选项</span
                >
              </div>
              <div
                @click="betchAddQuestion(element.questionType)"
                class="addOption add"
              >
                <img
                  src="../../../public/publishAssignment/添加.svg"
                  alt=""
                /><span style="line-height: 25px; color: #2672ff"
                  >添加下一题</span
                >
              </div>
              <div class="batchAdd add" @click="batchAddOptions(element, questionIndex)">
                <img
                  src="../../../public/publishAssignment/批量添加.svg"
                  alt=""
                /><span style="line-height: 25px; color: #2672ff"
                  >批量添加选项</span
                >
              </div>
              <div @click="deleteQuestion(element,questionIndex)" class="deleteQue add">
                <img
                  src="../../../public/publishAssignment/删除.svg"
                  alt=""
                /><span style="line-height: 25px; color: #f56c6c"
                  >删除本题</span
                >
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item name="多选题" v-if="list.multipleChoiceQuestions && list.multipleChoiceQuestions.length">
        <template slot="title">
          <span style="font-size: 23px; font-weight: 700"
            >多项选择题(共{{ list.multipleChoiceQuestions.length }}题, 每题{{list.multipleChoiceQuestions[0].proportion}}分, 共{{ list.multipleChoiceQuestions.length * list.multipleChoiceQuestions[0].proportion }}分)</span
          >
        </template>
        <div
          v-for="(element, questionIndex) in list.multipleChoiceQuestions"
          :key="element.id"
          class="board-item"
        >
          <!-- 多选题模板 -->
          <div
            v-if="element.questionType == '多选题'"
            class="item"
            :class="{ active: element.showAdd }"
            v-click-outside="{ handler: hideButtons, element: element }"
            @click="element.showAdd = true"
          >
            <div class="question" style="margin-bottom: 20px">
              <div style="">
                <span style="color: red; font-size: 20px; margin-right: "
                  >*</span
                ><span class="questionNumber">{{ questionIndex + 1 }}.</span>
                <span
                  class="questionContent"
                  v-show="!element.editing"
                  @click="clickQuestion(element, questionIndex)"
                  >{{ element.question }}</span
                >
                <el-input
                  style="width: 300px"
                  ref="questionInput"
                  type="textarea"
                  :autosize="true"
                  v-model="element.question"
                  @blur="element.editing = false"
                  v-show="element.editing"
                />
              </div>
              <div>
                <span
                  class="score"
                  v-show="!element.editScore"
                  @click="changeScore(element, questionIndex)"
                  >{{ element.proportion }}</span
                >
                <el-input
                  style="width: 100px"
                  ref="mutipleScoreInput"
                  v-model="element.proportion"
                  @blur="lostblur(element)"
                  v-show="element.editScore"
                />
                <span style="font-size: 16px">分</span>
              </div>
            </div>
            <div>
              <draggable
                :list="element.optionsList"
                class="board-column-content"
                :set-data="setData"
              >
                <div
                  v-for="(optionElement, optionsIndex) in element.optionsList"
                  :key="optionElement.id"
                  @mouseenter="optionElement.isHovered = false"
                  @mouseleave="optionElement.isHovered = true"
                  class="board-item"
                  style="diplay: flex; justify-content: space-between"
                >
                  <div style="display: flex; align-items: center">
                    {{ optionsItem[optionsIndex] }}.
                    <span
                      @click="
                        clickOptions(element, questionIndex, optionsIndex)
                      "
                      style="width: 400px; margin-left: 20px"
                      v-if="!optionElement.editing"
                      >{{ optionElement.content }} {{ optionElement.id }}</span
                    >
                    <el-input
                      type="textarea"
                      :autosize="true"
                      :ref="'mutipleOptionsInput_' + questionIndex"
                      v-model="optionElement.content"
                      style="
                        display: inline-block;
                        width: 400px;
                        margin-left: 20px;
                      "
                      class="enterpriseName"
                      @blur="optionElement.editing = false"
                      v-show="optionElement.editing"
                    ></el-input>
                  </div>
                  <el-button
                    @click="deleteOption(element, questionIndex, optionsIndex)"
                    :class="{ 'hovered-item': optionElement.isHovered }"
                    style="margin-left: 100px"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </div>
              </draggable>
            </div>
            <div v-if="element.showAdd" class="addBox">
              <div @click="inputAnswer(element)" class="addOption add">
                <img
                  src="../../../public/publishAssignment/正确答案.svg"
                  alt=""
                  style="margin-right: 3px"
                /><span style="line-height: 25px; color: #2672ff"
                  >正确答案</span
                >
              </div>
              <div
                @click="addOption(element, questionIndex)"
                class="addOption add"
              >
                <img
                  src="../../../public/publishAssignment/添加.svg"
                  alt=""
                /><span style="line-height: 25px; color: #2672ff"
                  >添加选项</span
                >
              </div>
              <div class="batchAdd add" @click="batchAddOptions(element, questionIndex)">
                <img
                  src="../../../public/publishAssignment/批量添加.svg"
                  alt=""
                /><span style="line-height: 25px; color: #2672ff"
                  >批量添加选项</span
                >
              </div>
              <div
                @click="betchAddQuestion(element.questionType)"
                class="addOption add"
              >
                <img
                  src="../../../public/publishAssignment/添加.svg"
                  alt=""
                /><span style="line-height: 25px; color: #2672ff"
                  >添加下一题</span
                >
              </div>
              <div @click="deleteQuestion(element, questionIndex)" class="deleteQue add">
                <img
                  src="../../../public/publishAssignment/删除.svg"
                  alt=""
                /><span style="line-height: 25px; color: #f56c6c"
                  >删除本题</span
                >
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item name="简答题" v-if="list.shortAnswerQuestions.length">
        <template slot="title">
          <span style="font-size: 23px; font-weight: 700"
            >简答题(共{{ list.shortAnswerQuestions.length }}题, 每题{{list.shortAnswerQuestions[0].proportion}}分, 共{{ list.shortAnswerQuestions.length * list.shortAnswerQuestions[0].proportion }}分)</span
          >
        </template>
        <div
          v-for="(element, questionIndex) in list.shortAnswerQuestions"
          :key="element.id"
          class="board-item"
        >
          <!-- 简答题模板 -->
          <div
            v-if="element.questionType == '简答题'"
            class="item"
            :class="{ active: element.showAdd }"
            v-click-outside="{ handler: hideButtons, element: element }"
            @click="element.showAdd = true"
          >
            <div class="question" style="margin-bottom: 20px">
              <div>
                <span style="color: red; font-size: 20px; margin-right: "
                  >*</span
                ><span class="questionNumber">{{ questionIndex + 1 }}.</span>
                <span
                  class="questionContent"
                  v-show="!element.editing"
                  @click="clickQuestion(element, questionIndex)"
                  >{{ element.question }}</span
                >
                <el-input
                  style="width: 300px"
                  ref="questionInput"
                  type="textarea"
                  :autosize="true"
                  v-model="element.question"
                  @blur="element.editing = false"
                  v-show="element.editing"
                />
              </div>
              <div>
                <span
                  class="score"
                  v-show="!element.editScore"
                  @click="changeScore(element, questionIndex)"
                  >{{ element.proportion }}</span
                >
                <el-input
                  style="width: 100px"
                  ref="shortScoreInput"
                  v-model="element.proportion"
                  @blur="lostblur(element)"
                  v-show="element.editScore"
                />
                <span style="font-size: 16px">分</span>
              </div>
            </div>
            <div v-if="element.showAdd" class="addBox">
              <div @click="inputAnswer(element)" class="addOption add">
                <img
                  src="../../../public/publishAssignment/正确答案.svg"
                  alt=""
                  style="margin-right: 3px"
                /><span style="line-height: 25px; color: #2672ff"
                  >正确答案</span
                >
              </div>
              <div
                @click="betchAddQuestion(element.questionType)"
                class="addOption add"
              >
                <img
                  src="../../../public/publishAssignment/添加.svg"
                  alt=""
                /><span style="line-height: 25px; color: #2672ff"
                  >添加下一题</span
                >
              </div>
              <div @click="deleteQuestion(element, questionIndex)" class="deleteQue add">
                <img
                  src="../../../public/publishAssignment/删除.svg"
                  alt=""
                /><span style="line-height: 25px; color: #f56c6c"
                  >删除本题</span
                >
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <div>
      <!-- 输入正确答案 -->
      <div>
        <!-- 单选题输入答案 -->
        <el-dialog
          title="请选择正确选项"
          :append-to-body="true"
          :visible.sync="dialogRadioVisible"
        >
          <el-radio-group v-model="questionItem.answer">
            <el-radio
              v-for="item in questionItem.optionsList"
              :key="item.id"
              :label="item.content"
              >{{ item.content }}</el-radio
            >
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogRadioVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureRadioAnswer">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 简答题输入答案 -->
        <el-dialog
          title="请输入正确答案"
          :append-to-body="true"
          :visible.sync="dialogFormVisible"
        >
          <el-input
            type="textarea"
            :autosize="true"
            v-model="questionItem.answer"
          ></el-input>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureAnswer">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 多选题输入答案 -->
        <el-dialog
          title="请选择正确选项(多选)"
          :append-to-body="true"
          :visible.sync="dialogCheckedVisible"
        >
          <el-checkbox-group v-model="checkedAnswer">
            <el-checkbox
              v-for="item in questionItem.optionsList"
              :key="item.id"
              :label="item.content"
              >{{ item.content }}</el-checkbox
            >
          </el-checkbox-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogCheckedVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureCheckedAnswer"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 批量添加选项 -->
        <el-dialog
          title="批量添加选项"
          :append-to-body="true"
          :visible.sync="dialogBatchAddVisible"
        >
          <p>每行代表一个选项，可以添加多个选项</p>
          <el-input
            type="textarea"
            :autosize="{ minRows: 7, maxRows: 9 }"
            v-model="addOptionsValue"
          ></el-input>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="batchAdd">确 定</el-button>
          </div>
        </el-dialog>
        <!-- <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
          <el-form :model="form">
            <el-form-item label="正确答案" :label-width="formLabelWidth">
              <el-input type="textarea" :autosize="true" v-model="answer"></el-input>
            </el-form-item>
          </el-form>
        </el-dialog> -->
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "DragKanbanDemo",
  data() {
    return {
      questionInputValue: "",
      optionsItem: ["A", "B", "C", "D", "E", "F"],
      answer: "",
      dialogFormVisible: false,
      questionItem: {},
      dialogRadioVisible: false,
      radiosAnswer: "",
      dialogBatchAddVisible: false,
      dialogCheckedVisible: false,
      addOptionsValue: "",
      nowIndex: 0,
      checkedAnswer: [],
      activeNames: ['1']
    };
  },
  components: {
    draggable,
  },
  props: {
    headerText: {
      type: String,
      default: "Header",
    },
    list: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  // 自定义指令，判断点击位置是否在盒子内部
  directives: {
    clickOutside: {
      bind(el, binding, vnode) {
        el.clickOutsideEvent = function (event) {
          if (!(el === event.target || el.contains(event.target))) {
            binding.value.handler(binding.value.element);
          }
        };
        document.body.addEventListener("mousedown", el.clickOutsideEvent);
      },
      unbind(el) {
        document.body.removeEventListener("mousedown", el.clickOutsideEvent);
      },
    },
  },
  methods: {
    lostblur(element, index) {
      console.log(element);
      element.editScore = false;
      console.log("shiqujiaoju");
    },
    hideButtons(element) {
      element.showAdd = false;
    },
    setData(dataTransfer) {
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
      dataTransfer.setData("Text", "");
    },
    clickQuestion(element, index) {
      element.editing = true;
      console.log(this.$refs.questionInput[index]);
      this.questionItem = element;
      // console.log(this.$refs.questionInput[index])
      setTimeout(() => {
        this.$refs.questionInput[index].focus();
      }, 10);
    },
    // (已修改)
    changeScore(element, index) {
      element.editScore = true;
      console.log(element.editScore);
      // console.log(this.$refs.scoreInput[index]);
      if(element.questionType === '单选题') {
        console.log(this.$refs.singleScoreInput[index]);
        setTimeout(() => {
          this.$refs.singleScoreInput[index].focus();
        }, 10);

      } else if(element.questionType === '多选题') {
        console.log(this.$refs.singleScoreInput[index]);
        setTimeout(() => {
          this.$refs.singleScoreInput[index].focus();
        }, 10);
      } else if(element.questionType === '简答题') {
        console.log(this.$refs.mutipleScoreInput[index]);
        setTimeout(() => {
          this.$refs.shortScoreInput[index].focus();
        }, 10);
      }
    },
    // （已修改）
    clickOptions(element, questionIndex, optionsIndex) {
      console.log(element);
      element.optionsList[optionsIndex].editing = true;
      console.log(questionIndex, optionsIndex);
      console.log(element);
      // console.log(this.$refs["optionsInput_" + questionIndex][optionsIndex]);
      if (element.questionType === "单选题") {
        console.log(this.$refs["singleOptionsInput_" + questionIndex][
            optionsIndex
          ]);
        setTimeout(() => {
          this.$refs["singleOptionsInput_" + questionIndex][
            optionsIndex
          ].focus();
        }, 10);
      } else if (element.questionType === "多选题") {
        setTimeout(() => {
          this.$refs["mutipleOptionsInput_" + questionIndex][
            optionsIndex
          ].focus();
        }, 10);
      }
    },
    // 添加选项（修改完成）
    addOption(element, index) {
      console.log(element, "element", index);
      this.$emit("addOp", { element, index });
      setTimeout(() => {
        element.optionsList[element.optionsList.length - 1].editing = true;
        console.log(this.$refs["optionsInput_" + index]);
      }, 10);
      setTimeout(() => {
        console.log(element.optionsList.length);
        if (element.questionType === "单选题") {
          console.log(
            this.$refs["singleOptionsInput_" + index][
              element.optionsList.length - 1
            ]
          );
          this.$refs["singleOptionsInput_" + index][
            element.optionsList.length - 1
          ].focus();
          this.$refs["singleOptionsInput_" + index][
            element.optionsList.length - 1
          ].select();
        } else if (element.questionType === "多选题") {
          this.$refs["mutipleOptionsInput_" + index][
            element.optionsList.length - 1
          ].focus();
          this.$refs["mutipleOptionsInput_" + index][
            element.optionsList.length - 1
          ].select();
        }
      }, 10);
    },
    // 删除选项(修改完成)
    deleteOption(element, questionIndex, optionsIndex) {
      this.$emit("deleteOp", { element, questionIndex, optionsIndex });
    },
    // 添加题目的时候聚焦该问题的文本框
    focusQuestion() {
      console.log("list发生了变化");
      setTimeout(() => {
        this.$refs.questionInput[this.$refs.questionInput.length - 1].focus();
        this.$refs.questionInput[this.$refs.questionInput.length - 1].select();
      }, 10);
      console.log("此时添加了题目");
    },
    // 删除题目
    deleteQuestion(element, questionIndex) {
      console.log(element, questionIndex);
      this.$emit("deleteQue", { questionType: element.questionType, questionIndex });
    },
    // 输入正确答案
    inputAnswer(element) {
      console.log(element, "element");
      if (element.questionType == "单选题") {
        this.questionItem = element;
        this.dialogRadioVisible = true;
      } else if (element.questionType == "简答题") {
        console.log(element);
        this.dialogFormVisible = true;
        this.questionItem = element;
      } else if (element.questionType == "多选题") {
        this.questionItem = element;
        this.dialogCheckedVisible = true;
      }
    },
    // 点击简答题的dialog的确定
    sureAnswer() {
      this.dialogFormVisible = false;
      console.log(this.list);
    },
    // 点击单选题的dialog
    sureRadioAnswer() {
      this.dialogRadioVisible = false;
      // this.questionItem.answer = this.radiosAnswer;
      console.log(this.list);
    },
    // 打开批量添加选项的dialog
    batchAddOptions(element, questionIndex) {
      this.addOptionsValue = '';
      console.log("执行了");
      this.dialogBatchAddVisible = true;
      this.nowIndex = questionIndex;
      console.log(questionIndex);
      this.questionItem = element;
      console.log(this.addOptionsValue);
    },
    // 批量添加选项
    batchAdd() {
      console.log("asdasd");
      console.log(this.addOption);
      console.log(this.questionItem, "qwedf");
      if (this.addOptionsValue) {
        this.$emit("batchAddOp", {
          index: this.nowIndex,
          element: this.questionItem, 
          optionsArr: this.addOptionsValue.split("\n"),
        });
      }
      this.dialogBatchAddVisible = false;
      
    },
    // 添加下一题(已修改)
    betchAddQuestion(questionType) {
      console.log(questionType);
      this.$emit("batchAddQu", {
        questionType,
      });
    },
    // 输入多选框的答案
    sureCheckedAnswer() {
      this.dialogCheckedVisible = false;
      console.log(this.questionItem, "dasd");
      this.questionItem.answer = JSON.stringify(this.checkedAnswer);
      console.log(this.checkedAnswer);
      console.log(this.list);
    },
  },
  mounted() {
    console.log(this.list, "传入的list");
    console.log(this.$refs.questionInput);
    console.log();
  },
  // 监听数组变化
  watch: {
    "list.singleChoiceQuestions": {
      handler(newArray, oldArray) {
        // 监听list数组变化
        // 你可以在这里执行一些针对list数组的操作
        // 遍历list数组中的每个元素，监听optionsList数组的变化
        newArray.forEach((element, index) => {
          // console.log(element);
          this.$watch(
            () => newArray, // 监听optionsList数组的长度
            (newVal, oldVal) => {
              console.log(newVal);
              console.log("此时list发生了变化");
              if (newVal.length > oldVal.length) {
                this.$refs.questionInput[index].focus();
                this.$refs.questionInput[index].select();
                console.log("此时添加了题目");
              }
              if (newVal.optionsList.length > newVal.optionsList.length) {
                console.log("dwsad");
                element.optionsList[
                  element.optionsList.length - 1
                ].editing = true;
                setTimeout(() => {
                  this.$refs["optionsInput_" + index][
                    element.optionsList.length - 1
                  ].focus();
                  console.log("执行了");
                  this.$refs["optionsInput_" + index][
                    element.optionsList.length - 1
                  ].select();
                }, 10);
              }
            }
          );
        });
      },
      deep: true,
    },
    "list.multipleChoiceQuestions": {
      handler(newArray, oldArray) {
        // 监听list数组变化
        // 你可以在这里执行一些针对list数组的操作
        // 遍历list数组中的每个元素，监听optionsList数组的变化
        newArray.forEach((element, index) => {
          // console.log(element);
          this.$watch(
            () => newArray, // 监听optionsList数组的长度
            (newVal, oldVal) => {
              console.log(newVal);
              console.log("此时list发生了变化");
              if (newVal.length > oldVal.length) {
                this.$refs.questionInput[index].focus();
                this.$refs.questionInput[index].select();
                console.log("此时添加了题目");
              }
              if (newVal.optionsList.length > newVal.optionsList.length) {
                console.log("dwsad");
                element.optionsList[
                  element.optionsList.length - 1
                ].editing = true;
                setTimeout(() => {
                  this.$refs["optionsInput_" + index][
                    element.optionsList.length - 1
                  ].focus();
                  console.log("执行了");
                  this.$refs["optionsInput_" + index][
                    element.optionsList.length - 1
                  ].select();
                }, 10);
              }
            }
          );
        });
      },
      deep: true,
    },
    "list.shortAnswerQuestions": {
      handler(newArray, oldArray) {
        // 监听list数组变化
        // 你可以在这里执行一些针对list数组的操作
        // 遍历list数组中的每个元素，监听optionsList数组的变化
        newArray.forEach((element, index) => {
          // console.log(element);
          this.$watch(
            () => newArray, // 监听optionsList数组的长度
            (newVal, oldVal) => {
              console.log(newVal);
              console.log("此时list发生了变化");
              if (newVal.length > oldVal.length) {
                this.$refs.questionInput[index].focus();
                this.$refs.questionInput[index].select();
                console.log("此时添加了题目");
              }
              if (newVal.optionsList.length > newVal.optionsList.length) {
                console.log("dwsad");
                element.optionsList[
                  element.optionsList.length - 1
                ].editing = true;
                setTimeout(() => {
                  this.$refs["optionsInput_" + index][
                    element.optionsList.length - 1
                  ].focus();
                  console.log("执行了");
                  this.$refs["optionsInput_" + index][
                    element.optionsList.length - 1
                  ].select();
                }, 10);
              }
            }
          );
        });
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.addBox {
  display: flex;
  margin-left: 30px;
  margin-top: 20px;
}
.add {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.score {
  display: inline-block;
  font-size: 16px;
  width: 100px;
}

.addOption {
  margin-right: 30px;
}

.batchAdd {
  margin-right: 30px;
}

.board-item:hover .deleteOption {
  display: block;
}

.deleteOption {
  display: none;
}

.hovered-item {
  opacity: 0;
  transition: opacity 0.5s;
}

// 想要修改el-input的样式需要这样写
::v-deep .enterpriseName .el-textarea__inner {
  width: 100%;
  color: #000;
  border: none;
  outline: none;
  background: #f9f9fc;
  padding: 5px;
  font-size: 16px;
}
.item {
  display: flex;
  background: white;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1),
    -1px 1px 3px 0px rgba(0, 0, 0, 0.1), -3px 5px 6px 0px rgba(0, 0, 0, 0.09),
    -8px 10px 8px 0px rgba(0, 0, 0, 0.05),
    -13px 18px 9px 0px rgba(0, 0, 0, 0.01), -21px 28px 10px 0px rgba(0, 0, 0, 0);
  padding: 30px 50px;
  width: 96%;
  margin: 20px auto;
  flex-direction: column;
  border: 1px solid transparent;
  transition: border-color 0.3s;
  border-radius: 3px;
}

.active {
  border: 2px #409eff solid;
}

.questionContent {
  padding: 5px;
  font-size: 16px;
  display: inline-block;
  width: 300px;
  // display: block;
}

.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question input {
  outline: none;
  border: none;
  padding: 5px;
  width: 300px;
  background: #f9f9fc;

  white-space: pre-wrap;
}

.questionNumber {
  font-size: 16px;
  margin-right: 30px;
}

.board-column {
  min-width: 300px;
  min-height: 100px;
  height: auto;
  overflow: hidden;
  background: #f6f7f9;
  border-radius: 3px;

  .board-column-header {
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    background: #e6a23c;
    color: #fff;
    border-radius: 3px 3px 0 0;
  }

  .board-column-content {
    height: auto;
    overflow: hidden;
    border: 10px solid transparent;
    min-height: 60px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;

    .board-item {
      cursor: pointer;
      font-size: 16px;
      width: 100%;
      height: auto;
      margin: 5px 0;
      background-color: #fff;
      text-align: left;
      // line-height: 54px;
      padding: 30px 30px;
      box-sizing: border-box;
      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
      display: flex;
    }
  }
}
</style>

